本章就要开始介绍前面没有说的文字了,文字的尺寸至关重要,但先理解了控件再
思考文字,会更容易一些,它们之间也有一些有趣的联系。
而在对控件和文字都掌握熟练以后,才能进入后面的组件设计认识。
首先我们知道,安卓和 iOS 应用的中英文字体各不相同,苹果是用苹方和 San Fra
ncisco,安卓使用思源黑体和 Robot。
如果没有同学可以在我公众号回复“字体”下载对应的字体源文件。
在后面我们主要以 iOS 作为说明的对象,安卓可以直接参照它的字体尺寸设置。
英文的字号
在苹果的官方建议中,有罗列比较完整的文字字号建议,但大家一定要谨记,那些就是
建议,并不需要在非官方的组件中应用那些字号。下图是苹果默认字体尺寸,详见我们
翻译的 iOS 规范第 124 页。
首先我们要先划分出一个文字字号的范围,之后所有字体的字号设置就在那里面挑选。
在 UI 中,最小字号的依据一般有两个,一个是人眼的可见度,另一个是屏幕的显示极
限,最小的字号应该在 9pt 。而最大的字号,以 iOS11 的标题字号 34pt 为准即可。
从 9-34,理论上其中每一个整数都可以使用,但我还是建议要应用一定的习惯。下面,
就是我在英文应用设计中会使用的字体字号列表,为了便于记忆,我就只拆分成三种类
型,初学者在使用时直接照搬就可以。
标题:34、28、24、22、20
阅读:18、16、14、12
注释:11、10、9
在英文应用中,我们应用的字号大小随项目复杂度决定,通常,尺寸会在五种以上,两
种标题、两种阅读、一种注释类字号,当然,我们还会通过字重和色彩进一步划分,不
过那不在这里的讨论范围中。例如下面我使用五种字号尺寸设计出来的原型案例:
在 iOS 中,尺寸小于 20pt 使用 SF Pro Text,大于等于 20pt 时则使用 SF Pro Display
字体,这点大家需要牢记。
数字字体可以等同于英文,但如果有需要展示数据的需求,那么最大尺寸就要靠自己的
判断了。
中文字体
中文字体和英文字体的最大差异在于笔画数,很多中文的笔画和结构都异常复杂,如
“嚷”、“饕”、“餐”等,所以,最小的尺寸不可能和英文相等。建议最小中文字号使用 11
pt。
至于最大的中文,因为苹方并没有 SF pro 字体那么丰富的字重,字号过大会有正负形
失衡的违和感,所以,最大字号的尺寸也应比英文小。
下面是我在中文应用中建议使用的字号:
标题:28、24、22、20
正文:18、16、14
注释:12、11
前面做过的原型,应用的就是这些字号。
中文的字号选择范围是比英文小的,并且,英文字重数远少于英文,我们在做中文的
应用排版远远比英文应用容易。很多新手天真的以为英文更容易设计,那都是源自对
英文的陌生,只是将字符纯粹的当成有节奏变化的几何形状而不是用来阅读的文本。
文字的边距
前面讲完了字号的选择范围,这里我们就要再来讨论一个问题,就是如何选择。
首先,合理的字号应用是要和环境息息相关的,而这种联系最多体现在文本区域的边
距上。能被合理阅读的文本段落,是需要留白的,过于拥挤的文字排列只会造成阅读
的不适。
因为前面我们已经说过控件的尺寸如何设置,所以当我们在设置文字时,很多时候是
根据控件定义的高度结合边距来选择文字的字号,下面通过一些控件来举例。
例如我们定义了一个 40pt 高的按钮,在设置文字时,尝试将多种文字字号置入,过多
的间距和过小的间距都会让按钮看起来不精致。合适的字体大小应该是 16pt。
而如果设置了一个 24pt 按钮,那么得到的结论应该是 12pt。
输入框的文字应用和按钮相同,也以上下间距作为主要参考。
字号的选择,除了本身定位(如标题或正文)以外,是可以通过比较的方式得出最优
结果的。只要稍微花一点点时间,像上方案例演示的一样将设计元素复制排列出来,
就可以很快选出正确的数值。
最后,前面说到的关于文字字号的设定,结合控件的规范,就能在下一节中决定组件
的设计尺寸,缺一不可。
多做针对性练习,以提升对控件和文字的掌握熟练度是很有必要的。建议多做一些简
单界面的临摹,并套用前面提到的元素尺寸,这样很快就能适应这种高效规范的方式
了。
———— END ————
暂无评论
违反法律法规
侵犯个人权益
有害网站环境